<template>
	<view class="">
		<view class="username">
			<view class="itemTitle">
				收货人：
			</view>
			<input type="text" placeholder="收货人姓名" />
		</view>
		<view class="addressItem">
			<view class="itemTitle">
				
			</view>
			<text>先生</text>
			<text>女士</text>
		</view>
		<view class="addressItem">
			<view class="itemTitle">电话号码：</view>
			<input type="text" placeholder="请输入收货地址" />
		</view>
		<view class="addressItem">
			<view class="itemTitle">收货地址：</view>
			<pickerAddress class="city" @change="change">{{city}}</pickerAddress>
		</view>
		
		<view class="addressBox">
			<view class="itemTitle">详细地址：</view>
			<textarea value="" placeholder="请输入详细地址" />
		</view>
	<!-- 	默认选择开关 -->
		<view class="defaultItem">
			<view class="itemTitle">默认地址：</view>
			<switch checked="true" color="#0bbbef" style="transform:scale(0.7)" @change="" />
		</view>
		
	<!-- 	保存地址 -->
	<view class="saveAddress">
		保存收货地址
	</view>
	</view>
</template>

<script>
	import pickerAddress from '@/components/pickerAddress/pickerAddress.vue'
	export default{
		data(){
			return{
				city:'请选择收货地址',
				
			}
		},
		components:{
			pickerAddress
		},
		methods:{
			change(data){
				this.city = data.data.join('')
				console.log(data.data.join(''))
			}
		}
	}
</script>

<style>
	.username{
		display: flex;
		margin: 0 30rpx;
		height: 90rpx;
		align-items: center;
	}
	.itemTitle{
		width: 150rpx;
		font-size: 28rpx;
	}
	.username input{
		border-bottom: 1rpx solid #e5e5e5;
		flex: 1;
		height: 90rpx;
		line-height: 90rpx;
	}
	.addressItem{
		display: flex;
		margin: 0 30rpx;
		height: 90rpx;
		align-items: center;
		border-bottom: 1rpx solid #e5e5e5;
	}
	.addressItem text{
		width: 80rpx;
		height: 45rpx;
		display: block;
		border: 1rpx solid #e5e5e5;
		font-size: 24rpx;
		/* margin-right: 10rpx; */
		text-align: center;
		color: #999;
		line-height: 45rpx;
	}
	.addressBox{
		margin: 0 30rpx;

		height: 180rpx;
		display: flex;
/* 		align-items: center; */
		border-bottom: 1rpx solid #e5e5e5;
	}
	.addressBox .itemTitle{
			width: 150rpx;
			line-height: 90rpx;
			font-size: 24rpx;
	}
	.addressBox textarea{
		flex: 1;
		height: 180rpx;
		line-height: 90rpx;
	}
	.saveAddress{
		width: 600rpx;
		margin: 80rpx auto;
		height: 80rpx;
		line-height: 80rpx;
		letter-spacing: 10rpx;
		text-align: center;
		color: #fff;
		font-size: 28rpx;
		background: #0bbbef;
		border-radius: 80rpx;
	}
	.city{
		font-size: 28rpx;
		color: #000;
	}
	.defaultItem{
		margin: 0 30rpx;
		line-height: 90rpx;
		display: flex;
		justify-content: space-between;
	}
	
</style>
